<template>
	<div class="message" :msg='15615'>
		<div class="message-center">
			<el-container>
				<el-aside width="400px">
					
				</el-aside>
				<el-main>
					<el-form
					:label-position="labelPosition" 
					ref="form" :model="form" 
					label-width="80px">
					  
					
					  <el-form-item label="用户名">
					    <el-input v-model="form.username"></el-input>
					  </el-form-item>
					
					  <el-form-item label="密码">
					    <el-input v-model="form.passwordOne" show-password></el-input>
					  </el-form-item>
					  
					  <el-form-item label="确认密码">
					    <el-input v-model="form.passwordTwo" show-password></el-input>
					  </el-form-item>
					  
					  <el-form-item label="性别">
					    <el-radio-group v-model="form.sex">
					      <el-radio label="男"></el-radio>
					      <el-radio label="女"></el-radio>
					    </el-radio-group>
					  </el-form-item>
					  
					
					  <el-form-item>
					    <el-button type="primary" @click="onSubmit">注册</el-button>
					    <el-button >取消</el-button>
					  </el-form-item>
					  
					</el-form>
				</el-main>
			</el-container>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import axios from 'axios'
	export default {
		data() {
			return {
				labelPosition: "top", //表单上对齐
				form: {
				  username: '',
				  sex: '',
				  password: '',
				  passwordOne: '',
				  passwordTwo: '',
				}
			}
		},
		computed: {

		},
		methods: {		
			//将form./username/password/sex通过post方式提交到后台
			onSubmit() {
			        console.log('register start!');
					if(this.form.passwordOne == this.form.passwordTwo) {
						this.form.password = this.form.passwordOne
						axios.post('http://localhost:3000/register',{
							username: this.form.username,
							password: this.form.password,
							sex: this.form.sex
						}).then(value => {
							if(value.data == '该账户已存在') {
								this.$message.error(value.data)
							}else {
								this.$router.push('/login')
								this.$message.success(value.data)
							}
							
						})
					} else {
						this.$message.error('两次输入密码不一致')
					}
					console.log('register end!');
			}
		},
		watch:{
			
		}
	}
</script>

<style>
	.message {
		background-color: ;
		padding: 0 2vw;
		margin-top: 10px;
		/* width: 97vw; */
		overflow: hidden;
		text-align: left;
	}
	.message-center {
		position: absolute;
		left: calc(50% - 30vw);
		top:  calc(50% - 275px);
		width: 60vw;
		height: 550px;
		/* border: 1px solid #ddd; */
		box-shadow: 0 0 20px #cfcfcf;
	}
	.el-aside {
		background-color: red;
	}
	@media screen and (max-width: 1000px) {
		.el-aside {
			display: none;
		}
	}
	.el-main {
		
	}
</style>


